<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员注册</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --dark-color: #2c3e50;
            --light-color: #ecf0f1;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .register-container {
            max-width: 500px;
            margin: 150px auto;
            border-radius: 10px;
            background-color: #fff;
            box-shadow: var(--shadow);
        }

        .register-title {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2rem;
            font-weight: 600;
            color: var(--dark-color);
        }

        .card-header {
            background-color: var(--dark-color);
            color: white;
            font-weight: 600;
            padding: 15px 20px;
            border-bottom: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .form-label {
            font-weight: 500;
        }

        .form-control {
            border-radius: 8px;
            border: 1px solid #ccc;
        }

        .btn-primary {
            background-color: var(--dark-color);
            border: none;
            color: white;
            font-weight: bold;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .btn-primary:hover {
            background-color: #2980b9;
            transform: scale(1.05);
        }

        .btn-outline-secondary {
            border-color: var(--primary-color);
            color: var(--primary-color);
            border-radius: 8px;
        }

        .btn-outline-secondary:hover {
            background-color: var(--primary-color);
            color: white;
        }

        .form-control, .form-select {
            border-radius: 8px;
        }

        .d-grid {
            display: grid;
            gap: 10px;
        }

        @media (max-width: 768px) {
            .register-container {
                padding: 20px;
                margin-top: 50px;
            }

            .register-title {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>

<div class="register-container">
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">管理员注册</h5>
        </div>
        <div class="card-body">
            <form th:action="@{/register}" method="post">
                <div class="mb-3">
                    <label for="username" class="form-label">用户名</label>
                    <input type="text" class="form-control" id="username" name="username" required>
                </div>
                <div class="mb-3">
                    <label for="email" class="form-label">邮箱</label>
                    <input type="email" class="form-control" id="email" name="email" required>
                </div>
                <div class="mb-3">
                    <label for="captcha" class="form-label">验证码</label>
                    <div class="captcha-container d-flex gap-2">
                        <input type="text" class="form-control" id="captcha" name="captcha" placeholder="输入验证码" required style="width: 75%">
                        <button type="button" class="btn btn-outline-secondary" id="sendCaptchaBtn">获取验证码</button>
                    </div>
                    <div id="countdown" class="countdown mt-2"></div>
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" class="form-control" id="password" name="password" required>
                </div>
                <div class="mb-3">
                    <label for="confirmPassword" class="form-label">确认密码</label>
                    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" required>
                </div>
                <div class="mb-3">
                    <label for="role" class="form-label">管理员类型</label>
                    <select class="form-select" id="role" name="role">
                        <option value="0">普通管理员</option>
                        <option value="1">超级管理员</option>
                    </select>
                </div>
                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary">注册</button>
                    <a th:href="@{/login}" class="btn btn-outline-secondary">已有账号？登录</a>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/js/bootstrap.bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const sendCaptchaBtn = document.getElementById('sendCaptchaBtn');
        const countdownEl = document.getElementById('countdown');
        let countdown = 60;
        let timer = null;

        // 发送验证码
        sendCaptchaBtn.addEventListener('click', function() {
            const username = document.querySelector('input[name="username"]').value;

            if (!username) {
                alert('请输入用户名');
                return;
            }

            // 禁用按钮防止重复点击
            sendCaptchaBtn.disabled = true;

            fetch('/sendCaptcha?username=' + encodeURIComponent(username), {
                method: 'GET'
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('验证码已发送');
                        startCountdown();
                    } else {
                        alert(data.message || '验证码发送失败');
                        sendCaptchaBtn.disabled = false;
                    }
                })
                .catch(error => {
                    alert('请求失败，请重试');
                    sendCaptchaBtn.disabled = false;
                });
        });

        // 倒计时功能
        function startCountdown() {
            countdownEl.textContent = `${countdown}秒后重新获取`;
            timer = setInterval(() => {
                countdown--;
                countdownEl.textContent = `${countdown}秒后重新获取`;

                if (countdown <= 0) {
                    clearInterval(timer);
                    sendCaptchaBtn.disabled = false;
                    countdownEl.textContent = '';
                    countdown = 60;
                }
            }, 1000);
        }
    });
</script>

</body>
</html>
